<template>
    <form action="" style="width: 100%;height: 100%;" v-loading="loading" element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <div style="width: 100%;height: 100%;">
            <div style="width: 100%;height: 9%;display: flex;align-items: center;">
                <div class="scrollable-div" ref="scrollableDiv" @wheel="scrollHorizontally">
                    <el-radio v-for="(item,index) in allForm" :key="index" v-model="radio1" :label="item.label" border>{{
                        returnTitle(index) }}</el-radio>
                </div>

                <div style="margin-left: auto;display: flex;gap:15px;">
                    <div style="display: flex; align-items: center; justify-content: center; width: 28px; "
                        class="btn_width">
                        <el-button style="width: 28px;height: 28px;" icon="el-icon-refresh-right"
                            @click="reNewDataAction()"></el-button>
                    </div>
                    <div class="btn_second">
                        <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="新增一条管网至主控阀">
                            <el-button slot="reference" @click="add" icon="el-icon-plus">新增</el-button>
                        </el-popover>
                    </div>
                    <div class="btn_three">
                        <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="删除所有选中的管网至主控阀">
                            <el-button slot="reference" @click="remove" icon="el-icon-delete">删除</el-button>
                        </el-popover>
                    </div>

                </div>
            </div>
            <div
                style="height: 84.5%;position: relative; overflow: auto;padding: 10px;border: 1px solid rgb(221, 228, 239);">
                <div style="display: flex;  align-items: center; width: 100%;">
                    <div class="before"></div>
                    <div>调压设施至有限空间（厨房、车间、锅炉）</div>
                    <div class="smallTilte">
                        <div>根据图纸，从调压设施的位置沿着管线直至有限空间，一路观察地质和周边环境。</div>

                    </div>
                    <div style="display: flex;margin-left: auto;align-items: center;gap: 15px;width: 40%;">
                        <div >备注</div>
                        <el-input v-model="allForm[radio1].data.notes.content" placeholder="请输入" style="width: 90%;"></el-input>


                    </div>
                </div>



                <div class="contentPadding" style="width: 100%; display: flex; flex-wrap: wrap;gap: 1%;">
                    <div style="border-radius: 4px;border: 1px solid #DCDFE6;margin-top: 20px;width: 19.2%;height: 202px;"
                        v-for="(item, index) in allForm[radio1].data.spaceIMageForDevices" :key="index">
                        <div style="display: flex; padding: 10px;padding-left: 30px;align-items: center;">
                            <div
                                style="width: 4px;height: 15px;background-color: rgb(24, 144, 255);margin-right: 5px;border-radius: 2px;">
                            </div>
                            <div>{{ item.title }}</div>
                        </div>
                        <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                        <div style="width: 100%;justify-content: center;padding: 20px;padding-left: 33px; ">

                            <div style="display: flex;gap:25px;text-align: center;">

                                <div style="width: 120px;height: 120px;position: relative;" class="demo-image__error">
                                    <el-image v-show="spaceIMageForDevices[index].imageAddress.length > 0"
                                        style="width: 100%;height: 100%;" :src="spaceIMageForDevices[index].imageAddress[0]"
                                        :preview-src-list="spaceIMageForDevices[index].imageAddress">
                                        <div slot="error" class="image-slot">
                                            <img src="../../assets/images/stageIcon/加载失败.jpeg" alt=""
                                                style="width: 100%;height: 100%;">
                                        </div>
                                    </el-image>
                                    <img v-show="spaceIMageForDevices[index].imageAddress.length == 0"
                                        src="../../assets/images/stageIcon/暂无图片.png" alt=""
                                        style="width: 100%;height: 100%;">
                                    <div class="imageSample" v-show="spaceIMageForDevices[index].imageAddress.length > 0">范例图
                                    </div>
                                </div>
                                <div style="width: 120px;height: 120px;">
                                    <imageLookSixth :upAddress="item.upAddress" :imageData="item.imageData"
                                        :projectInfo="projectInfo" :id="stageSurveyInnerLppnList[radio1].id"
                                        :dictName="item.dictName" :sampleImageAll="spaceIMageForDevices"
                                        :imageIndex="index" :flieName="item.title"></imageLookSixth>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div style="display: flex;  align-items: center;margin-top: 30px;">
                    <div class="before"></div>
                    <div>燃气管线两边10米内的安全带信息</div>
                </div>
                <div class="titleStyle">
                    <div class="inputHorizon"
                        v-for="item in allForm[radio1].data.energyPipeLineSideSaftyInformationWithinTenMeter"
                        :key="item.id">
                        <div style="width: 112px;text-align: right;margin-right: 20px; word-break: break-all;">{{ item.name }}</div>
                        <div style="width:56%" v-if="item.componentType == false">
                            <el-select v-model="item.content" placeholder="请选择" style="width: 100%;">
                                <el-option v-for="items in item.data" :key="items.id" :label="items.name" :value="items.id">
                                </el-option>
                            </el-select>
                        </div>
                     
                            <el-input v-if="item.componentType == true" v-model="item.content"
                                :placeholder="item.placeholder" style="width: 56%;"
                                @input="restrictNumericInput(item)"></el-input>
                   
                    </div>
                </div>
                <div style="display: flex;  align-items: center;margin-top: 30px;">
                    <div class="before"></div>
                    <div>其他现场情况</div>
                </div>



                <div class="contentPadding" style="width: 100%; display: flex; flex-wrap: wrap;gap: 1%;">
                    <div style="border-radius: 4px;border: 1px solid #DCDFE6;margin-top: 20px;width: 19.2%;height: 202px;"
                        v-for="(item, index) in allForm[radio1].data.otherCurrentSituation" :key="index">
                        <div style="display: flex; padding: 10px;padding-left: 30px;align-items: center;">
                            <div
                                style="width: 4px;height: 15px;background-color: rgb(24, 144, 255);margin-right: 5px;border-radius: 2px;">
                            </div>
                            <div>{{ item.title }}</div>
                        </div>
                        <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                        <div style="width: 100%;justify-content: center;padding: 20px;padding-left: 33px; ">

                            <div style="display: flex;gap:25px;text-align: center;">

                                <div style="width: 120px;height: 120px;position: relative;" class="demo-image__error">
                                    <el-image v-show="otherCurrentSituation[index].imageAddress.length > 0"
                                        style="width: 100%;height: 100%;"
                                        :src="otherCurrentSituation[index].imageAddress[0]"
                                        :preview-src-list="otherCurrentSituation[index].imageAddress">
                                        <div slot="error" class="image-slot">
                                            <img src="../../assets/images/stageIcon/加载失败.jpeg" alt=""
                                                style="width: 100%;height: 100%;">
                                        </div>
                                    </el-image>
                                    <img v-show="otherCurrentSituation[index].imageAddress.length == 0"
                                        src="../../assets/images/stageIcon/暂无图片.png" alt=""
                                        style="width: 100%;height: 100%;">
                                    <div class="imageSample" v-show="otherCurrentSituation[index].imageAddress.length > 0">范例图
                                    </div>
                                </div>
                                <div style="width: 120px;height: 120px;">
                                    <imageLookSixth :upAddress="item.upAddress" :imageData="item.imageData"
                                        :projectInfo="projectInfo" :id="stageSurveyInnerLppnList[radio1].id"
                                        :dictName="item.dictName" :sampleImageAll="otherCurrentSituation"
                                        :imageIndex="index" :flieName="item.title"></imageLookSixth>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <el-button class="buttonStyle" @click="submit">保存</el-button>
        </div>
    </form>
</template>
<script>
import { getInfo } from "@/api/project/info";
import imageLookSixth from "../OtherOwerUseComponent/imageLookSixth.vue";
import { getFileListApi } from "@/api/project/file";
import { updateSurveyApi } from "@/api/project/survey";
import { inLowPressureNet, addInLowPressureNet, removeInLowPressureNet } from "@/api/project/stageApi";
import { getTemplateFileListApi } from "@/api/project/file";
export default {
    created() {
        // this.add()
        const projectId = this.$route.params && this.$route.params.projectId;
        this.getInfo(projectId);
    },
    props: ['jsonData', 'imageData', 'projectInfo'],
    watch: {
        projectInfo: {
            handler(newData, oldData) {

                ///获取基本信息
                this.getData()
            },

        },
        // jsonData: {
        //     handler(newData, oldData) {
        //         // 这里可以调用您的方法，例如:
        //         this.runMethod(newData);
        //     },
        //     immediate: true // 立即触发一次，以便在初始值传递时也能运行方法
        // },
        imageData: {
            handler(newData, oldData) {

         

            },
            immediate: true // 立即触发一次，以便在初始值传递时也能运行方法
        },
    },
    components: {
        imageLookSixth
    },
    data() {
        return {
            loading: false,
            otherCurrentSituation: [
                // { id: 0, title: "无隐患", imageAddress: [], dictName: 'otherSitesNoHiddenDangers', content: null, upAddress: '勘察范例/园区内低压管网/其他现场情况/无隐患', imageData: {}, imageHint: '现场照片', description: '标志桩损坏描述' },
                { id: 1, title: "电缆缠绕", imageAddress: [], dictName: 'cableWinding', content: null, upAddress: '勘察范例/园区内低压管网/其他现场情况/电缆缠绕', imageData: {}, imageHint: '隐患图片', description: '标志桩损坏描述' },
                { id: 2, title: "绿化遮挡", imageAddress: [], dictName: 'greeningShelter', content: null, upAddress: '勘察范例/园区内低压管网/其他现场情况/绿化遮挡', imageData: {}, imageHint: '隐患图片', description: '标志桩损坏描述' },
                { id: 3, title: "管道异常", imageAddress: [], dictName: 'pipelineAbnormality', content: null, upAddress: '勘察范例/园区内低压管网/其他现场情况/管道异常', imageData: {}, imageHint: '隐患图片', description: '标志桩损坏描述' },
            ],
            spaceIMageForDevices: [
                { id: 1, title: "现场照片", imageAddress: [], dictName: 'noHiddenDangers', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/现场照片', imageData: {}, imageHint: '现场照片', description: '标志桩损坏描述' },
                { id: 1, title: "标志桩损坏", imageAddress: [], dictName: 'damagedMarkerPosts', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/标志桩损坏', imageData: {}, imageHint: '现场照片', description: '标志桩损坏描述' },
                { id: 2, title: "标志桩需要增加", imageAddress: [], dictName: 'signNeedAdd', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/标志桩需要增加', imageData: {}, imageHint: '隐患照片', description: '标志需要增加描述' },
                { id: 3, title: "套管生锈", imageAddress: [], dictName: 'rustOnCasing', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/套管生锈', imageData: {}, imageHint: '隐患照片', description: '套管生锈描述' },
                { id: 4, title: "套管未封堵", imageAddress: [], dictName: 'casingNotBlocked', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/套管未封堵', imageData: {}, imageHint: '隐患照片', description: '套管未封堵描述' },
                { id: 5, title: "套管脱离地面", imageAddress: [], dictName: 'bushingOffGround', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/套管脱离地面', imageData: {}, imageHint: '隐患照片', description: '套管脱离地面描述' },
                { id: 6, title: "盘管封埋地面", imageAddress: [], dictName: 'coilOffGround', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/盘管封埋地面', imageData: {}, imageHint: '隐患照片', description: '盘管封埋地面描述' },
                { id: 7, title: "盘管生锈", imageAddress: [], dictName: 'coilBuryRust', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/盘管生锈', imageData: {}, imageHint: '隐患照片', description: '盘管生锈描述' },
                { id: 8, title: "盘管损坏", imageAddress: [], dictName: 'coilDamage', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/盘管损坏', imageData: {}, imageHint: '隐患照片', description: '盘管损坏描述' },
                { id: 9, title: "立管沉降", imageAddress: [], dictName: 'riserSettlement', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管沉降', imageData: {}, imageHint: '隐患照片', description: '立管沉降描述' },
                { id: 10, title: "立管占压", imageAddress: [], dictName: 'riserOccupy', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管占压', imageData: {}, imageHint: '隐患照片', description: '立管占压描述' },
                { id: 11, title: "立管支架损坏", imageAddress: [], dictName: 'riserDamagedBracket', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管支架损坏', imageData: {}, imageHint: '隐患照片', description: '立管支架损坏描述' },
                { id: 12, title: "立管预留管生锈", imageAddress: [], dictName: 'riserReservedPipeRust', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管预留管生锈', imageData: {}, imageHint: '隐患照片', description: '立管预留管生锈描述' },
                { id: 13, title: "立管生锈", imageAddress: [], dictName: 'riserRust', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管生锈', imageData: {}, imageHint: '隐患照片', description: '立管生锈描述' },
            ],
            input: '',
            checked: '',
            ///所有数据的集合
            stageSurveyInnerLppnList: [],
            radio1: 0,
            allForm: [],
            controllPressureDeviceStillLimitSpace: [
                ///componentType=false显示下拉菜单，为true显示输入框
                {
                    name: '标志阀', id: 1, componentType: false, content: null, dictName: 'flagValve', data: [
                        { name: '损坏', id: 1 },
                        { name: '需要增加', id: 2 },
                    ]
                },
                {
                    name: '套管', id: 2, componentType: false, content: null, dictName: 'bushing', data: [
                        { name: '生锈', id: 1 },
                        { name: '未封堵', id: 2 },
                        { name: '脱离地面', id: 3 },
                    ]
                },
                {
                    name: '盘管', id: 3, componentType: false, content: null, dictName: 'coil', data: [
                        { name: '封埋', id: 1 },
                        { name: '生锈', id: 2 },
                        { name: '盘管损坏', id: 3 },
                    ]
                },
                {
                    name: '立管', id: 4, componentType: false, content: null, dictName: 'innerLowPressureRiser', data: [
                        { name: '沉降', id: 1 },
                        { name: '占压', id: 2 },
                        { name: '生锈', id: 3 },
                        { name: '支架损坏', id: 4 },
                        { name: '预留', id: 5 },
                    ]
                },
            ],



        }
    },
    name: "inLowPressureNet",
    methods: {
        returnTitle(index){
            
            if (this.allForm[index].data.notes.content!=null){
                return this. allForm[index].data.notes.content
            }
            return '园区内低压管网'+(index+1) 
        },
        getData() {
            this.loading=true
            inLowPressureNet(this.projectInfo.projectId).then(response => {
                this.loading=false
                if (response.code == 200) {
                    this.stageSurveyInnerLppnList = response.data
                    this.distrbute()

                }
            })
        },
        reNewDataAction() {
            this.getImage('勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)', 1)
            this.getImage('勘察范例/园区内低压管网/其他现场情况', 2)
            this.getData()
        },
        getInfo(projectId) {
            getInfo(projectId).then(response => {
                this.projectInfo = response.data;

            })
        },
        reNew() {
            ///获取基本信息
            inLowPressureNet(this.projectInfo.projectId).then(response => {

                if (response.code == 200) {


                    this.stageSurveyInnerLppnList = response.data
                    this.distrbute()

                }
            })
        },
        distrbute() {
            this.allForm = []
            for (let i = 0; i < this.stageSurveyInnerLppnList.length; i++) {
                let spaceIMageForDevices = [
                    { id: 1, title: "现场照片", imageAddress: [], dictName: 'noHiddenDangers', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/现场照片', imageData: {}, imageHint: '现场照片', description: '标志桩损坏描述' },
                    { id: 1, title: "标志桩损坏", imageAddress: [], dictName: 'damagedMarkerPosts', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/标志桩损坏', imageData: {}, imageHint: '现场照片', description: '标志桩损坏描述' },
                    { id: 2, title: "标志桩需要增加", imageAddress: [], dictName: 'signNeedAdd', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/标志桩需要增加', imageData: {}, imageHint: '隐患照片', description: '标志需要增加描述' },
                    { id: 3, title: "套管生锈", imageAddress: [], dictName: 'rustOnCasing', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/套管生锈', imageData: {}, imageHint: '隐患照片', description: '套管生锈描述' },
                    { id: 4, title: "套管未封堵", imageAddress: [], dictName: 'casingNotBlocked', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/套管未封堵', imageData: {}, imageHint: '隐患照片', description: '套管未封堵描述' },
                    { id: 5, title: "套管脱离地面", imageAddress: [], dictName: 'bushingOffGround', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/套管脱离地面', imageData: {}, imageHint: '隐患照片', description: '套管脱离地面描述' },
                    { id: 6, title: "盘管封埋地面", imageAddress: [], dictName: 'coilOffGround', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/盘管封埋地面', imageData: {}, imageHint: '隐患照片', description: '盘管封埋地面描述' },
                    { id: 7, title: "盘管生锈", imageAddress: [], dictName: 'coilBuryRust', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/盘管生锈', imageData: {}, imageHint: '隐患照片', description: '盘管生锈描述' },
                    { id: 8, title: "盘管损坏", imageAddress: [], dictName: 'coilDamage', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/盘管损坏', imageData: {}, imageHint: '隐患照片', description: '盘管损坏描述' },
                    { id: 9, title: "立管沉降", imageAddress: [], dictName: 'riserSettlement', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管沉降', imageData: {}, imageHint: '隐患照片', description: '立管沉降描述' },
                    { id: 10, title: "立管占压", imageAddress: [], dictName: 'riserOccupy', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管占压', imageData: {}, imageHint: '隐患照片', description: '立管占压描述' },
                    { id: 11, title: "立管支架损坏", imageAddress: [], dictName: 'riserDamagedBracket', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管支架损坏', imageData: {}, imageHint: '隐患照片', description: '立管支架损坏描述' },
                    { id: 12, title: "立管预留管生锈", imageAddress: [], dictName: 'riserReservedPipeRust', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管预留管生锈', imageData: {}, imageHint: '隐患照片', description: '立管预留管生锈描述' },
                    { id: 13, title: "立管生锈", imageAddress: [], dictName: 'riserRust', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管生锈', imageData: {}, imageHint: '隐患照片', description: '立管生锈描述' },
                ]
                // for (let n = 0; n < spaceIMageForDevices.length; n++) {
                //     spaceIMageForDevices[n].content = this.stageSurveyInnerLppnList[i][spaceIMageForDevices[n].dictName]
                // }
                let energyPipeLineSideSaftyInformationWithinTenMeter = [
                    { name: '雨水井数', id: 1, componentType: true, content: null, placeholder: "请输入(数量)", dictName: 'catchBasin', isNumTypeInput: true },
                    { name: '污水井数', id: 2, componentType: true, content: null, placeholder: "请输入(数量)", dictName: 'bilgeWell', isNumTypeInput: true },
                    { name: '电力井数', id: 3, componentType: true, content: null, placeholder: "请输入(数量)", dictName: 'electricWell', isNumTypeInput: true },
                    { name: '有害气体雨污水井数', id: 4, componentType: true, content: null, placeholder: "请输入(数量)", dictName: 'harmfulSewageWell', isNumTypeInput: true },
                    { name: '甲烷最高值', id: 5, componentType: true, content: null, placeholder: "请输入", dictName: 'methaneMax', isNumTypeInput: false },
                    { name: '硫化氢最高值', id: 6, componentType: true, content: null, placeholder: "请输入", dictName: 'hydrogenSulfideMax', isNumTypeInput: false },
                    { name: '一氧化碳最高值', id: 7, componentType: true, content: null, placeholder: "请输入", dictName: 'carbonMonoxideMax', isNumTypeInput: false },
                    { name: '燃气管道与电缆线缆平行距离', id: 8, componentType: true, content: null, placeholder: "请输入", dictName: 'parallelDistance', isNumTypeInput: false },
                    { name: '燃气管道与电缆线缆交叉点', id: 9, componentType: true, content: null, placeholder: "请输入", dictName: 'intersection', isNumTypeInput: false },
                    { name: '电缆缆线电力电压', id: 10, componentType: true, content: null, placeholder: "请输入", dictName: 'powerVoltage', isNumTypeInput: false },
                ]

                for (let n = 0; n < energyPipeLineSideSaftyInformationWithinTenMeter.length; n++) {
                    energyPipeLineSideSaftyInformationWithinTenMeter[n].content = this.stageSurveyInnerLppnList[i][energyPipeLineSideSaftyInformationWithinTenMeter[n].dictName]
                }

                let otherCurrentSituation = [
                  
                    { id: 1, title: "电缆缠绕", imageAddress: [], dictName: 'cableWinding', content: null, upAddress: '勘察范例/园区内低压管网/其他现场情况/电缆缠绕', imageData: {}, imageHint: '隐患图片', description: '标志桩损坏描述' },
                    { id: 2, title: "绿化遮挡", imageAddress: [], dictName: 'greeningShelter', content: null, upAddress: '勘察范例/园区内低压管网/其他现场情况/绿化遮挡', imageData: {}, imageHint: '隐患图片', description: '标志桩损坏描述' },
                    { id: 3, title: "管道异常", imageAddress: [], dictName: 'pipelineAbnormality', content: null, upAddress: '勘察范例/园区内低压管网/其他现场情况/管道异常', imageData: {}, imageHint: '隐患图片', description: '标志桩损坏描述' },
                ]

                let notes =
                    { dictName: 'notes', placeholder: '请输入', isNumTypeInput: false, content: null }
                notes.content = this.stageSurveyInnerLppnList[i].notes
                var dict = { data: {}, label: this.allForm.length }
                dict.data['spaceIMageForDevices'] = spaceIMageForDevices
                dict.data['energyPipeLineSideSaftyInformationWithinTenMeter'] = energyPipeLineSideSaftyInformationWithinTenMeter
                dict.data['otherCurrentSituation'] = otherCurrentSituation
                dict.data['notes'] = notes
                this.allForm.push(dict)



            }

            this.getImage('勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)', 1)
            this.getImage('勘察范例/园区内低压管网/其他现场情况', 2)
        },

        scrollHorizontally(event) {
            event.preventDefault();
            const scrollAmount = event.deltaY;
            this.$refs.scrollableDiv.scrollLeft += scrollAmount;
        },
        ///删除表单行动
        remove() {
            if (this.allForm.length > 1) {
                ///删除操作


                let id = this.stageSurveyInnerLppnList[this.radio1].id
                removeInLowPressureNet(id).then(response => {
                    if (response.code == 200) {
                        if (this.radio1 == this.allForm.length - 1) {
                            this.radio1 = this.radio1 - 1
                        }
                        this.reNew()
                    }
                })



            }
        },
        ///添加新的表单
        add() {


            let stageSurvey = { projectId: this.projectInfo.projectId }

            addInLowPressureNet(stageSurvey).then(response => {
                if (response.code == 200) {
                    this.reNew()
                }
            })




        },
        open() {
            this.$alert('提交内低压管网成功', '提交成功', {
                confirmButtonText: '确定',

            });
        },
        restrictNumericInput(item) {

            const value = item.content;
            // 使用正则表达式验证输入是否为数字
            if (!/^\d*$/.test(value)) {
                // 如果输入不是数字，则移除非数字字符
                if (item.isNumTypeInput == true) {
                    item.content = value.replace(/[^\d]/g, '');
                }
            }
        },
        submit() {
            this.loading=true
            //修改已有的
            let all = { stageSurveyInnerLppnList: [] }
            for (let i = 0; i < this.stageSurveyInnerLppnList.length; i++) {

                var stageSurvey = { projectId: this.projectInfo.projectId, id: this.stageSurveyInnerLppnList[i].id }


                //主控阀
                for (let n = 0; n < this.allForm[i].data['energyPipeLineSideSaftyInformationWithinTenMeter'].length; n++) {

                    if (this.allForm[i].data['energyPipeLineSideSaftyInformationWithinTenMeter'][n].dictName != '') {
                        stageSurvey[this.allForm[i].data['energyPipeLineSideSaftyInformationWithinTenMeter'][n].dictName] = this.allForm[i].data['energyPipeLineSideSaftyInformationWithinTenMeter'][n].content
                    }
                }
                if (this.allForm[i].data['notes'].dictName != '') {
                    stageSurvey[this.allForm[i].data['notes'].dictName] = this.allForm[i].data['notes'].content
                }


                all.stageSurveyInnerLppnList.push(stageSurvey)
            }

            updateSurveyApi(all).then(response => {
                this.loading=false
                if (response.code == 200) {
                    this.open()
                }
            })

            //提交新增的
            // let num=this.allForm.length-stageSurveyInnerLppnList
            for (let i = this.stageSurveyInnerLppnList.length; i < this.allForm.length; i++) {
                var stageSurvey = { projectId: this.projectInfo.projectId }

                //主控阀
                for (let n = 0; n < this.allForm[i].data['energyPipeLineSideSaftyInformationWithinTenMeter'].length; n++) {

                    if (this.allForm[i].data['energyPipeLineSideSaftyInformationWithinTenMeter'][n].dictName != '') {
                        stageSurvey[this.allForm[i].data['energyPipeLineSideSaftyInformationWithinTenMeter'][n].dictName] = this.allForm[i].data['energyPipeLineSideSaftyInformationWithinTenMeter'][n].content
                    }
                }
                if (this.allForm[i].data['notes'].dictName != '') {
                    stageSurvey[this.allForm[i].data['notes'].dictName] = this.allForm[i].data['notes'].content
                }


                addInLowPressureNet(stageSurvey).then(response => {
                    if (response.code == 200) {

                    }
                })
            }




        },
        getImage(path, options) {
            if (options == 1) {
                let spaceIMageForDevices = [
                    { id: 1, title: "现场照片", imageAddress: [], dictName: 'noHiddenDangers', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/现场照片', imageData: {}, imageHint: '现场照片', description: '标志桩损坏描述' },
                    { id: 1, title: "标志桩损坏", imageAddress: [], dictName: 'damagedMarkerPosts', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/标志桩损坏', imageData: {}, imageHint: '现场照片', description: '标志桩损坏描述' },
                    { id: 2, title: "标志桩需要增加", imageAddress: [], dictName: 'signNeedAdd', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/标志桩需要增加', imageData: {}, imageHint: '隐患照片', description: '标志需要增加描述' },
                    { id: 3, title: "套管生锈", imageAddress: [], dictName: 'rustOnCasing', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/套管生锈', imageData: {}, imageHint: '隐患照片', description: '套管生锈描述' },
                    { id: 4, title: "套管未封堵", imageAddress: [], dictName: 'casingNotBlocked', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/套管未封堵', imageData: {}, imageHint: '隐患照片', description: '套管未封堵描述' },
                    { id: 5, title: "套管脱离地面", imageAddress: [], dictName: 'bushingOffGround', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/套管脱离地面', imageData: {}, imageHint: '隐患照片', description: '套管脱离地面描述' },
                    { id: 6, title: "盘管封埋地面", imageAddress: [], dictName: 'coilOffGround', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/盘管封埋地面', imageData: {}, imageHint: '隐患照片', description: '盘管封埋地面描述' },
                    { id: 7, title: "盘管生锈", imageAddress: [], dictName: 'coilBuryRust', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/盘管生锈', imageData: {}, imageHint: '隐患照片', description: '盘管生锈描述' },
                    { id: 8, title: "盘管损坏", imageAddress: [], dictName: 'coilDamage', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/盘管损坏', imageData: {}, imageHint: '隐患照片', description: '盘管损坏描述' },
                    { id: 9, title: "立管沉降", imageAddress: [], dictName: 'riserSettlement', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管沉降', imageData: {}, imageHint: '隐患照片', description: '立管沉降描述' },
                    { id: 10, title: "立管占压", imageAddress: [], dictName: 'riserOccupy', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管占压', imageData: {}, imageHint: '隐患照片', description: '立管占压描述' },
                    { id: 11, title: "立管支架损坏", imageAddress: [], dictName: 'riserDamagedBracket', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管支架损坏', imageData: {}, imageHint: '隐患照片', description: '立管支架损坏描述' },
                    { id: 12, title: "立管预留管生锈", imageAddress: [], dictName: 'riserReservedPipeRust', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管预留管生锈', imageData: {}, imageHint: '隐患照片', description: '立管预留管生锈描述' },
                    { id: 13, title: "立管生锈", imageAddress: [], dictName: 'riserRust', content: null, upAddress: '勘察范例/园区内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管生锈', imageData: {}, imageHint: '隐患照片', description: '立管生锈描述' },
                ]
                this.spaceIMageForDevices = spaceIMageForDevices
                getTemplateFileListApi(path).then(response => {




                    if (response.code == 200) {
                        if (response.data.length != 0) {

                            Array.from(response.data).forEach(item => {
                        

                                for (var i = 0; i < this.spaceIMageForDevices.length; i++) {
                      
                                    if (this.spaceIMageForDevices[i].upAddress == item.fileTreePath) {

                                        Array.from(item.fileList).forEach(items => {

                                            this.spaceIMageForDevices[i].imageAddress.push(this.$myGlobalVariable + items)

                                        })
                                    }
                                }

                            }

                            );

                        }
                    
                    }
                })
            } else if (options == 2) {
                let otherCurrentSituation = [
                    // { id: 0, title: "无隐患", imageAddress: [], dictName: 'otherSitesNoHiddenDangers', content: null, upAddress: '勘察范例/园区内低压管网/其他现场情况/无隐患', imageData: {}, imageHint: '现场照片', description: '标志桩损坏描述' },
                    { id: 1, title: "电缆缠绕", imageAddress: [], dictName: 'cableWinding', content: null, upAddress: '勘察范例/园区内低压管网/其他现场情况/电缆缠绕', imageData: {}, imageHint: '隐患图片', description: '标志桩损坏描述' },
                    { id: 2, title: "绿化遮挡", imageAddress: [], dictName: 'greeningShelter', content: null, upAddress: '勘察范例/园区内低压管网/其他现场情况/绿化遮挡', imageData: {}, imageHint: '隐患图片', description: '标志桩损坏描述' },
                    { id: 3, title: "管道异常", imageAddress: [], dictName: 'pipelineAbnormality', content: null, upAddress: '勘察范例/园区内低压管网/其他现场情况/管道异常', imageData: {}, imageHint: '隐患图片', description: '标志桩损坏描述' },
                ]
                this.otherCurrentSituation = otherCurrentSituation
                getTemplateFileListApi(path).then(response => {
                   
                    if (response.code == 200) {
                        if (response.data.length != 0) {

                            Array.from(response.data).forEach(item => {
                               

                                for (var i = 0; i < this.otherCurrentSituation.length; i++) {
                          
                                    if (this.otherCurrentSituation[i].upAddress == item.fileTreePath) {

                                        Array.from(item.fileList).forEach(items => {

                                            this.otherCurrentSituation[i].imageAddress.push(this.$myGlobalVariable + items)

                                        })
                                    }
                                }

                            }

                            );

                        }

                    }
                })
            }
        },
        runMethod(newData) {


            for (var i = 0; i < this.controllPressureDeviceStillLimitSpace.length; i++) {

                if (newData.hasOwnProperty(this.controllPressureDeviceStillLimitSpace[i].dictName)) {
                    if (this.controllPressureDeviceStillLimitSpace[i].componentType == true) {
                        this.controllPressureDeviceStillLimitSpace[i].content = newData[this.controllPressureDeviceStillLimitSpace[i].dictName]
                    } else {
                        let value = Number(newData[this.controllPressureDeviceStillLimitSpace[i].dictName])
                        if (value != 0) {
                            this.controllPressureDeviceStillLimitSpace[i].content = value
                        }
                    }
                }

            }


            for (var i = 0; i < this.energyPipeLineSideSaftyInformationWithinTenMeter.length; i++) {

                if (newData.hasOwnProperty(this.energyPipeLineSideSaftyInformationWithinTenMeter[i].dictName)) {
                    if (this.energyPipeLineSideSaftyInformationWithinTenMeter[i].componentType == true) {
                        this.energyPipeLineSideSaftyInformationWithinTenMeter[i].content = newData[this.energyPipeLineSideSaftyInformationWithinTenMeter[i].dictName]
                    } else {
                        let value = Number(newData[this.energyPipeLineSideSaftyInformationWithinTenMeter[i].dictName])
                        if (value != 0) {
                            this.energyPipeLineSideSaftyInformationWithinTenMeter[i].content = value
                        }
                    }
                }
            }
            for (var i = 0; i < this.otherCurrentSituation.length; i++) {
                if (newData.hasOwnProperty(this.otherCurrentSituation[i].dictName)) {
                    this.otherCurrentSituation[i].content = newData[this.otherCurrentSituation[i].dictName]
                }
            }
            for (var i = 0; i < this.spaceIMageForDevices.length; i++) {
                if (newData.hasOwnProperty(this.spaceIMageForDevices[i].dictName)) {
                    this.spaceIMageForDevices[i].content = newData[this.spaceIMageForDevices[i].dictName]
                }
            }

        },
    },
    mounted() {

        // this.getImage('勘察范例/内低压管网/其他现场情况/绿化遮挡', 1)
        // this.getImage('勘察范例/内低压管网/其他现场情况/管道异常', 2)
    }
}
</script>
<style></style>